<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo" autofocus="" autocomplete="off" placeholder="What needs to be done?" v-model="newTodoRef"
          @keyup.enter="addTodo" />
      </header>
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" 
        :checked="allDoneRef"
        @input="setAllChecked($event.target.checked)"/>
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li class="todo" 
            v-for="todo in computedArray" 
            :key="todo.id" 
            :class="{
            completed: todo.completed,
            editing: todo === editingTodoRef
          }"
          @dblclick="editingHandle(todo)">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed" />
              <label >{{ todo.title }}</label>
              <button class="destroy" @click="deleteTodo(todo)"></button>
            </div>
            <input 
            class="edit" 
            type="text"
            v-model="todo.title"
            @blur="confirmEdit"
            @keyup.enter="confirmEdit"
            @keyup.escape="cancelEdit(todo)" />
          </li>
        </ul>
      </section>
      <footer class="footer">
        <span class="todo-count">
          <strong>{{ remainingRef }}</strong>
          <span>item{{ remainingRef === 1 ? "" : "s" }} left</span>
        </span>
        <ul class="filters">
          <li><a href="#/all" :class="{ selected: hashRef === 'all' }">All</a></li>
          <li><a href="#/active" :class="{ selected: hashRef === 'active' }">Active</a></li>
          <li><a href="#/completed" :class="{ selected: hashRef === 'completed' }">Completed</a></li>
        </ul>
        <button class="clear-completed" v-show="completedRef > 0"
          @click="computedClear">
          Clear completed
        </button>
      </footer>
    </section>
  </div>
</template>

<script>
import { useTodoList } from "./composition/useTodoList.js";
import { useNewTodo } from "./composition/useNewTodo.js";
import { useFilter } from "./composition/useFilter.js";
import { useEditTodo } from "./composition/useEditTodo.js";
import { useDeleteTodo } from "./composition/useDeleteTodo.js";
export default {
  setup() {
    const { todoRef } = useTodoList();
    return {
      todoRef,
      ...useNewTodo(todoRef),
      ...useFilter(todoRef),
      ...useEditTodo(todoRef),
      ...useDeleteTodo(todoRef)
    }
  }
}
</script>
